<app-page>
	<div id="page-wrapper">
		<div class="row">
			<div class="col-lg-12">
				<h1 class="page-header">{{ 'Dashboard' | translate }}</h1>
			</div>
			<!-- /.col-lg-12 -->
		</div>
		<!-- /.row -->
		<div class="row">
			<div class="col-lg-3 col-md-6">
				<div class="panel panel-primary">
					<div class="panel-heading">
						<div class="row">
							<div class="col-xs-3">
								<i class="fa fa-th fa-5x"></i>
							</div>
							<div class="col-xs-9 text-right">
								<div class="medium">{{stats[0]| number}}</div>
								<div>{{ 'Blocks' | translate }}</div>
							</div>
						</div>
					</div>
					<a href="#" routerLink="/blocks">
						<div class="panel-footer">
							<span class="pull-left">{{ 'ViewDetails' | translate }}</span>
							<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
							<div class="clearfix"></div>
						</div>
					</a>
				</div>
			</div>
			<div class="col-lg-3 col-md-6">
				<div class="panel panel-green">
					<div class="panel-heading">
						<div class="row">
							<div class="col-xs-3">
								<i class="fa fa-tasks fa-5x"></i>
							</div>
							<div class="col-xs-9 text-right">
								<div class="medium">{{stats[1]| number}}</div>
								<div>{{ 'Transactions' | translate }}</div>
							</div>
						</div>
					</div>
					<a href="#" routerLink="/transactions">
						<div class="panel-footer">
							<span class="pull-left">{{ 'ViewDetails' | translate }}</span>
							<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
							<div class="clearfix"></div>
						</div>
					</a>
				</div>
			</div>
			<div class="col-lg-3 col-md-6">
				<div class="panel panel-yellow">
					<div class="panel-heading">
						<div class="row">
							<div class="col-xs-3">
								<i class="fa fa-users fa-5x"></i>
							</div>
							<div class="col-xs-9 text-right">
								<div class="medium">{{stats[2]| number}}</div>
								<div>{{ 'Accounts' | translate }}</div>
							</div>
						</div>
					</div>
					<a href="#" routerLink="/accounts">
						<div class="panel-footer">
							<span class="pull-left">{{ 'ViewDetails' | translate }}</span>
							<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
							<div class="clearfix"></div>
						</div>
					</a>
				</div>
			</div>
			<div class="col-lg-3 col-md-6">
				<div class="panel panel-red">
					<div class="panel-heading">
						<div class="row">
							<div class="col-xs-3">
								<i class="fa fa-files-o fa-5x"></i>
							</div>
							<div class="col-xs-9 text-right">
								<div class="medium">{{stats[3]| number}}</div>
								<div>{{ 'Actions' | translate }}</div>
							</div>
						</div>
					</div>
					<a href="#" routerLink="/actions">
						<div class="panel-footer">
							<span class="pull-left">{{ 'ViewDetails' | translate }}</span>
							<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
							<div class="clearfix"></div>
						</div>
					</a>
				</div>
			</div>
		</div>
		<!-- /.row -->

		<div class="row">
			<div class="col-lg-6">
				<div class="panel panel-default">
					<div class="panel-heading">
						{{ 'Blocks' | translate }}

						<div class="pull-right">
							<button type="button" routerLink="/blocks" class="btn btn-outline btn-info btn-xs">
								{{ 'ViewAll' | translate }}
							</button>
						</div>

					</div>
					<!-- /.panel-heading -->
					<div class="panel-body">
						<app-loading *ngIf="!blocks"></app-loading>
						<div *ngIf="blocks" class="table-responsive">
							<table class="table table-striped">
								<thead>
								<tr>
									<th>#</th>
									<th>{{ 'Time' | translate }}</th>
									<th>{{ 'Producer' | translate }}</th>
								</tr>
								</thead>
								<tbody>
								<tr *ngFor="let block of blocks">
									<td><a routerLink="/blocks/{{block.block_num}}">{{block.block_num}}</a></td>
									<td>{{block.createdAt.sec * 1000 | date:'medium'}}</td>
									<td><a routerLink="/accounts/{{block.block.producer}}">{{block.block.producer}}</a></td>
								</tr>
								</tbody>
							</table>
						</div>
						<!-- /.table-responsive -->
					</div>
					<!-- /.panel-body -->
				</div>
				<!-- /.panel -->
			</div>
			<!-- /.col-lg-6 -->
			<div class="col-lg-6">
				<div class="panel panel-default">
					<div class="panel-heading">
						{{ 'Transactions' | translate }}

						<div class="pull-right">
							<button type="button" routerLink="/transactions" class="btn btn-outline btn-info btn-xs">
								{{ 'ViewAll' | translate }}
							</button>
						</div>
					</div>
					<!-- /.panel-heading -->
					<div class="panel-body">
						<app-loading *ngIf="!transactions"></app-loading>
						<div *ngIf="transactions" class="table-responsive">
							<table class="table table-striped">
								<thead>
								<tr>
									<th>#</th>
									<th>{{ 'Time' | translate }}</th>
								</tr>
								</thead>
								<tbody>
								<tr *ngFor="let transaction of transactions">
									<td><a routerLink="/transactions/{{transaction.trx_id}}">{{transaction.trx_id | slice:0:32}}...</a>
									</td>
									<td>{{transaction.createdAt.sec * 1000 | date:'medium'}}</td>
								</tr>
								</tbody>
							</table>
						</div>
						<!-- /.table-responsive -->
					</div>
					<!-- /.panel-body -->
				</div>
				<!-- /.panel -->
			</div>
			<!-- /.col-lg-6 -->
		</div>

		<!-- /.row -->
	</div>
	<!-- /#page-wrapper -->
</app-page>
